<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>香港18区疫情统计</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
    <link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">疫情可视化系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../img/admin2.png" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:window.location ='regist.html';">用户注册</a></dd>
                    <dd><a href="javascript:window.location ='login.html';">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:window.location = 'country.html';">全国疫情统计</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:window.location ='guizhou.html';">贵州省</a></dd>
                        <dd><a href="javascript:window.location ='yunnan.html';">云南省</a></dd>
                        <dd><a href="javascript:window.location ='xianggang.html';">香港</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item "><a href="javascript:window.location = 'admin.html';">管理员列表</a></li>
                <li class="layui-nav-item"><a href="javascript:window.location = 'patience.html'">患者信息管理</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
        <!--        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>-->
        <div id="main" style="width: 100%;height: 100%;"></div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        疫情可视化系统
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script src="../dist/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script type="text/javascript">

    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

    });

    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据

        //指定图表的配置 和数据
        var option = {
            title: {
                text: '香港18区疫情统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: '{b}<br/>{c} (p / km2)'
            },
            legend: {
                data: ['人数']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ["中西区", "湾仔", "东区", "南区", "油尖旺", "深水埗", "九龙城", "黄大仙", "观塘", "葵青", "荃湾", "屯门", "元朗",
                    "北区", "大埔", "沙田", "西贡", "离岛"]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '人数',
                type: 'bar',
                data: [33, 57, 16, 33, 20, 30, 20, 11, 25, 40, 32, 40, 62, 23, 45, 74, 15, 9],
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(0, 0, 0, 0.2)'
                }
            }]
        }
        myChart.setOption(option);

</script>
</body>
</html>
